<template>
  <div class="center_overview">
    <div class="center_overview-chart">
      <div ref="echartsRef" style="width: 100%; height: 300px"></div>
    </div>

    <div class="center_overview-show">
      <div class="center_overview-show-header">数据总览</div>
      <div class="center_overview-show-content">
        <div
          class="center_overview-show-content-item"
          v-for="item in showList"
          :key="item.key"
        >
          <div class="label">
            <div class="label-icon" :style="{ background: item.color }"></div>
            <div class="label-text">{{ item.name }}</div>
          </div>
          <div class="num">
            <div>{{ item.value }}</div>
            <div style="font-size: 12px; margin-left: 3px">{{ item.unit }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="DataScreening">
import { ref, onMounted, nextTick, shallowRef } from "vue";
import * as echarts from "echarts";
import { getOverviewApi } from "@/api/home/index.js";

const chart = shallowRef(null);
const echartsRef = ref(null);
const totalNum = ref(0);

const showList = ref([
  {
    key: "todayClockInPeopleCount",
    name: "今日打卡人数",
    value: 0,
    unit: "人",
    color: "#B2E8FC",
  },
  {
    key: "approvalCount",
    name: "近7日审批单数",
    value: 0,
    unit: "单",
    color: "#DEE0E3",
  },
  {
    key: "userCount",
    name: "企业总人数",
    value: 0,
    unit: "人",
    color: "#3370FF",
  },
  {
    key: "deptCount",
    name: "部门数",
    value: 0,
    unit: "个",
    color: "#50CEFB",
  },
  //   {
  //     key: 5,
  //     name: "昨日使用人数",
  //     value: 0,
  //     unit: "人",
  //     color: "#BACEFD",
  //   },
]);

const option = ref({
  title: {
    text: "使用总人数",
    subtext: "{a|" + totalNum.value + "}" + "{c|(人数)}",
    textStyle: {
      color: "#93989E",
      align: "center",
      fontSize: 21,
      fontWeight: "bold",
      height: 30,
      lineHeight: 30,
    },
    subtextStyle: {
      rich: {
        a: {
          color: "#0B0B0B",
          align: "center",
          fontSize: 40,
          fontWeight: "bold",
        },
        c: {
          color: "#0B0B0B",
          align: "center",
          fontSize: 20,
          fontWeight: "bold",
        },
      },
    },
    x: "center",
    y: "center",
    top: 110,
  },
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "数据总览",
      type: "pie",
      radius: ["65%", "80%"],
      avoidLabelOverlap: false,
      color: ["#B2E8FC", "#DEE0E3", "#3370FF", "#50CEFB", "#BACEFD"],
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: showList.value,
    },
  ],
});

onMounted(() => {
  nextTick(() => {
    chart.value = echarts.init(echartsRef.value);
    chart.value.setOption(option.value);
  });
});

/**
 * 获取数据总览并渲染echarts图表
 */
const getOverview = () => {
  getOverviewApi().then((res) => {
    if (res.code == 200) {
      console.log("onlineUsercount", res.data);
      const data = res.data;
      showList.value[0].value = Number(data.todayClockInPeopleCount);
      showList.value[1].value = Number(data.approvalCount);
      showList.value[2].value = Number(data.userCount);
      showList.value[3].value = Number(data.deptCount);

      totalNum.value =
        Number(data.todayClockInPeopleCount) +
        Number(data.approvalCount) +
        Number(data.userCount) +
        Number(data.deptCount);

      option.value.title.subtext = "{a|" + totalNum.value + "}" + "{c|(人数)}";
      chart.value.setOption(option.value);
    }
  });
};
getOverview();
</script>

<style scoped lang="scss">
.center_overview {
  display: flex;
  padding-top: 15px;

  &-chart {
    width: 40%;
  }

  &-show {
    width: 60%;
    margin-top: 10px;
    padding-top: 30px;

    &-header {
      font-weight: 500;
      font-size: 16px;
      color: #1e1e2c;
    }

    &-content {
      display: flex;
      flex-wrap: wrap;

      &-item {
        width: 186px;
        height: 80px;
        border-radius: 4px;
        padding: 20px 10px;
        margin-right: 15px;
        margin-bottom: 15px;

        .label {
          display: flex;
          align-items: center;

          &-icon {
            width: 12px;
            height: 12px;
            margin-right: 6px;
          }

          &-text {
            font-weight: 500;
            font-size: 14px;
            color: #898d93;
          }
        }

        .num {
          display: flex;
          align-items: center;

          font-weight: 500;
          font-size: 18px;
          color: #1e1e2c;
        }
      }
    }
  }
}
</style>
